<template>
  <view>
    <view class="leo-list">
      <view
        class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="uni-flex uni-row leo-align-items-center">
          <view class="">
            <view
              class=" text-line-height-1 text-16 pingfangbold leo-ellipsis-1 u-type-primary"
            >
              <span>
                {{ item.name }}
              </span>
              <view class="childstyle">
                <view
                  class="children-for"
                  v-for="(i, index1) in item.list"
                  :key="index1"
                  @click="click(i.id, i.beginTime)"
                >
                  <view class="children-content">
                    <view>{{ i.title }}</view>
                    <view class="timeStyle">
                      <view>时间： {{ i.beginTime | formatter }} ~</view>
                      <view>{{ i.endTime | formatter }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
    <u-action-sheet
      :list="list1"
      @click="click1"
      v-model="show"
    ></u-action-sheet>
    <view class="bottom-btn">
      <u-button
        @click="toPostExerciseTitle"
        type="primary"
        :ripple="true"
        size="medium"
        >发布习题任务</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      list1: [
        { text: "查看作答情况" },
        { text: "查看习题" },
        { text: "发布习题" },
      ],
      list: [],
      currentItemBeginTime: "",
      currentId: "",
      courseId: "",
      pageNum: 1,
      total: 0,
      pages: 0,
      status: "",
    };
  },
  async onLoad(e) {
    this.courseId = e.courseId;
    await this.initial();
    uni.$on("exerciseTask", this.initial);
  },
  onPullDownRefresh() {
    this.initial();
  },
  async onReachBottom() {
    this.status = 'loading';
    this.pageNum = this.pageNum + 1
    if (this.pageNum < this.pages) {
      await this.getList();
      this.status = 'loadmore';
    } else {
      this.pageNum = this.pageNum - 1;
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }
  },
  methods: {
    async initial() {
      this.pageNum = 1;
      this.total = 0;
      const res = await this.getList();
      this.total = res.total;
      this.list = res.data;
      this.pages = res.pages;
      uni.stopPullDownRefresh();
    },
    async getList() {
      return await this.$u.api.getExerciseTask(this.courseId, {
        pageNum: this.pageNum,
      });
    },
    click(id, beginTime) {
      this.show = true;
      this.currentId = id;
      this.currentItemBeginTime = beginTime;
    },
    click1(index) {
      let flag =
        new Date(this.currentItemBeginTime).getTime() <=
        new Date().getTime();
      if (index === 0) {
        this.toAnsweringSituation();
      } else if (index === 1) {
        if (flag) {
          this.$u.toast("答题已开始，不能修改习题");
          return;
        }
        this.toExerciseDetail();
      } else {
        if (flag) {
          this.$u.toast("答题已开始，不能发布习题");
          return;
        }
        this.toPostExercise();
      }
    },
    toExerciseDetail() {
      this.$u.route({
        url: "pages/exercise_detail/exercise_detail",
        params: {
          id: this.currentId,
        },
      });
    },
    toAnsweringSituation() {
      this.$u.route({
        url: "pages/answering_situation/answering_situation",
        params: {
          id: this.currentId,
        },
      });
    },
    toPostExercise() {
      this.$u.route({
        url: "pages/post_exercise/post_exercise",
        params: {
          id: this.currentId,
        },
      });
    },
    toPostExerciseTitle() {
      this.$u.route({
        url: "pages/post_exercise_task/post_exercise_task",
        params: {
          courseId: this.courseId,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.bottom-btn {
  font-size: 30rpx;
  font-weight: bolder;
  bottom: 0;
  right: 50%;
  left: 32%;
  position: fixed;
  margin-bottom: 20rpx;
}

.leo-list {
  margin: 15rpx 20rpx;
  background: #ffffff;
  .leo-list-item {
    padding: 18px 12px;
    margin-bottom: 20px;
    box-shadow: -2px 0px 16px 6px rgba(163, 163, 163, 0.15);
  }
}
.uni-flex {
  display: flex;
  flex-direction: row;
}

.uni-flex-item {
  flex: 1;
}

.uni-row {
  flex-direction: row;
}

.uni-column {
  flex-direction: column;
}

.leo-align-items-center {
  align-items: center;
}

.leo-space-between {
  // justify-content: space-between;
}

.text-line-height-1 {
  line-height: 1 !important;
}

.text-12 {
  font-size: 25rpx !important;
}
.text-16 {
  font-size: 30rpx;
}
.leo-ellipsis-1 {
  display: flex;
  flex-direction: column;
  color: #000;
  font-style: 18px;
  font-weight: bold;
  .childstyle {
    padding: 0px 10px 0px 16px;
    .children-for {
      display: flex;
      margin-bottom: 60rpx;
      .children-content {
        color: rgb(40, 40, 40);
        font-style: 16px;
        font-weight: 400;
        /* 强制一行内显示文本 */
        white-space: nowrap;
        /* 超出的部分隐藏 */
        overflow: hidden;
        /* 文字用省略号替代超出部分 */
        text-overflow: ellipsis;
        .timeStyle {
          display: flex;
          margin-top: 6px;
          color: rgba(156, 164, 169, 1);
          font-weight: bold;
          font-size: 12px;
        }
      }
    }
    .children-for:first-child {
      margin-top: 20px;
    }
  }
}
</style>
